<template>
	<view style="height: 100%;position: relative;">
		<view class="shop-manage">
			<view class="shop-title">
				<view class="shop-text">相册管理</view>
				<view class="shop-cancel" @click="handleManage">{{ isManage ? '取消' : '管理' }}</view>
			</view>
			
			<view style="height: 32rpx;"></view>
			<view class="row">
				<view class="col" v-if="!isManage" style="margin-bottom: 20rpx;">
					<u-upload
						:fileList="photoList"
						@afterRead="handleUpload"
						@delete="handleHeaderDel"
						multiple
						:deletable='false'
						:maxCount="20"
						:width="imageWidth"
						:height="imageWidth"
						style="margin: 0 24rpx 24rpx 0"
					></u-upload>
				</view>
				<view class="col" v-for="(item, index) in photoList" v-if="isManage">
					<view class="col-item" @click="handleImgSelect(index)">
						<image class="show-photo" :style="{ width: imageWidth + 'rpx', height: imageWidth + 'rpx' }" :src="item.url" mode="aspectFill" />
						<image v-if="selected.includes(index)" class="show-select" mode="aspectFill" src="https://static.wddzq.com/static/checked.png" />
						<image v-if="!selected.includes(index) && isManage" class="show-select" mode="aspectFill" src="https://static.wddzq.com/static/no_checked.png" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer-container" v-if="isManage">
			<view class="footer">
				<view class="footer-box">
					<text style="font-size: 32rpx;color: #999;">已选：</text>
					<text style="font-size: 32rpx;color: #333;">{{selected.length}}</text>
				</view>
				<view class="footer-del" @click="handleHeaderDel">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMerchantInfo, commitMerchantApply,
	} from '../../config/api.js';
	import { to, uploadAfter, getSystemInfo } from '../../config/utils.js';
	
	export default {
		data() {
			return {
				mercheantInfo: {},
				photoList: [],
				isManage: false,
				selected: [],
				imageWidth: 212,
			}
		},
		onShow() {
			let __photo_local__ = uni.getStorageSync('__photo_local__');
			
			if(__photo_local__) {
				this.photoList = __photo_local__.split('|').map(item => ({ url: item }));
			}
		},
		onReady() {
			// this.fetchMerchantInfo();
			let system = getSystemInfo();
			if(system) {
				let rpx = pxToRpx(24);
				let screenWidth = pxToRpx(system.screenWidth || 320);
				this.imageWidth = Math.floor((screenWidth - 48 - (rpx * 3))/3);
			}
		},
		methods: {
			handleManage() {
				this.isManage = !this.isManage;
			},
			async fetchMerchantInfo() {
				const [err, mercheantInfo] = await to(getMerchantInfo());
				if(err) return;
				this.mercheantInfo = mercheantInfo?.data || {};
				this.photoList = this.mercheantInfo?.photoList?.split('|')?.map(item => ({ url: item })) || [];
			},
			
			async handleUpload(file) {
				const fileData = await uploadAfter(file.file);
			
				let fileList = fileData?.filter(item => item.url);
				this.photoList = this.photoList.concat(fileList);
				
				this.handleSubmit();
			},
			handleImgSelect(index) {
				if(!this.isManage) return;
				
				let _selected = [...this.selected];
				let i = _selected.indexOf(index);
				if(i > -1) {
					_selected.splice(i, 1);
				} else {
					_selected.push(index);
				}
				this.selected = _selected;
			},
			handleHeaderDel() {
				let fileList = [...this.photoList];
				let _fileList = fileList.filter((i, index) => !this.selected.includes(index));
				console.log(_fileList, this.selected);
			
				this.photoList = _fileList;
				this.handleSubmit();
			},
			async handleSubmit() {
				// let params = {
				// 	...this.mercheantInfo,
				// 	photoListV2: ,
				// };
				uni.setStorageSync('__photo__', this.photoList.map(item => item.url).join('|'));
				
				// const [err, data] = await to(commitMerchantApply(params));
				
				// if(err) {
				// 	return uni.showToast({
				// 		title: err?.msg || '保存失败',
				// 		icon: 'none'
				// 	})
				// }
				
				// uni.showToast({
				// 	title: data?.msg || '提交成功',
				// 	icon: 'none',
				// });
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
.shop-manage {
	height: 100%;
	background-color: #fff;
}
.shop-title {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 24rpx;
	border-bottom: 1rpx solid #eee;
}
.shop-text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
}
.shop-cancel {
	font-size: 28rpx;
	font-weight: 400;
	color: #000000;
}

.show-photo {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.show-select {
	width: 36rpx;
	height: 36rpx;
	position: absolute;
	top: 12rpx;
	right: 12rpx;
}

.footer-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 60rpx;
}
.footer {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-top: 1rpx solid #eee;
}
.footer-del {
	font-size: 32rpx;
	font-weight: 400;
	color: #F93A4A;
}

.row {
	display: flex;
	flex-wrap: wrap;
}
.col {
	/* width: 23%; */
	/* height: 155rpx; */
	margin-left: 24rpx;
}
.col-item {
	position: relative;
	/* width: 100%; */
	/* height: 100%; */
	border-radius: 5rpx;
	border: 1rpx solid #f2f2f2;
}
</style>
